<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	body{
		background: #FFFBEC;
	}
	#pic{
		display: block;
		margin: 0 auto;
	}
	#anniu{
		width: 300px;
		height: 100px;
		margin: 0 auto;
	}
	#anniu input{
		width: 100px;
		height: 60px;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var lujing = ["images/caishen.jpg","images/apple.jpg","images/meinv.jpg","images/shuaige.jpg","images/ipad.jpg","images/tuhaojin.jpg","images/falali.jpg","images/lanbojini.jpg"];//用来存储图片路径的数组
		var start = document.getElementById('start');
		var end = document.getElementById('end');
		var pic = document.getElementById('pic');

		var timer;
		// 给开始按钮加事件
		start.onclick = function(){
			clearInterval(timer);
			// 设置一个定时器，开始切换图片
			timer = setInterval(function(){
				// 抽取随机下标
				var num = Math.floor(Math.random()*8);
				pic.setAttribute('src',lujing[num]);//将随机下标对应的图片路径写到pic中
			},100)
		}

		// 给结束按钮加事件
		end.onclick = function(){
			clearInterval(timer);//清理定时器，让效果停掉
		}
	}
</script>
</head>

<body>
	<div id="anniu">
		<input type="button" value="开始抽奖！" id="start" />
		<input type="button" value="停！" id="end" />
	</div>
	
	<img src="images/caishen.jpg"  id="pic" />
</body>
</html>
